<input type="text">

<div class="loading"></div>
<ul></ul>

<script src="./axios.js"></script>
<script>
// 一、获取input绑定值改变事件
document.querySelector('input').oninput = function() { // this 事件源  input标签对象

    // 放入loading

    // 二、事件处理函数中：核心思想请求接口
    // - 细节：获取参数，请求接口
    get(
        'http://www.baidu.com/sugrec',
        {
            prod: 'pc',
            wd: this.value
        },
        'json'
    )
    .then(res => {
        // 三、拿到数据之后：核心思想页面显示
        // - 细节：清空、遍历、造li、放内容、追加
        // console.log(res)
        document.querySelector('ul').innerText = ''
        if (!res.g) return
        res.g.forEach((item, i) => {
            let liObj = document.createElement('li')
            liObj.innerText = item.q 
            document.querySelector('ul').appendChild(liObj)
        })
    })
    .catch(err => {
        console.log(err)
    })
    .finally(() => {
        // 清空loading
        console.log('finally')
    })
}
</script>